@use '@angular/material' as mat;
@use './m3-theme';
@import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700');
@import url('https://fonts.googleapis.com/icon?family=Material+Icons');

@include mat.core();

html {
  // Apply the light theme by default
  @include mat.core-theme(m3-theme.$light-theme);
  @include mat.all-component-themes(m3-theme.$light-theme);
  @include mat.strong-focus-indicators-theme(m3-theme.$light-theme);
}

:root {
  --btn-color: lightgray;
  --btn-hover-color: #1EB77F;
  --strong-color: #2C7CD1;
  --font-color: #3d3c3c;
  --cmp-bg: #303030;
  --cmp-color:#2C7CD1;
  --input-name-color:#EAFDA1;
  --input-color: #92c34e;
  --input-bg: #3d3c3c;
}

body,
html {
  height: 100%;
  min-height: 100%;
}

body {
  font-family: 'Source Sans Pro', sans-serif;
  color: var(--font-color);
  margin: 0;
  background: -moz-linear-gradient(-45deg, rgba(136, 212, 152, 0) 73%, rgba(136, 212, 152, 0.3) 81%, rgba(136, 212, 152, 1) 100%);
  background: -webkit-linear-gradient(-45deg, rgba(136, 212, 152, 0) 73%, rgba(136, 212, 152, 0.3) 81%, rgba(136, 212, 152, 1) 100%);
  background: linear-gradient(135deg, rgba(136, 212, 152, 0) 73%, rgba(136, 212, 152, 0.3) 81%, rgba(136, 212, 152, 1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0088d498', endColorstr='#88d498', GradientType=1);

  display: flex;
  flex-direction: column;
  justify-content: center;
}

app-root {
  height: 630px;
}

button {
  display: flex;
  align-content: center;
  justify-content: center;
  color: gray;
  margin: 4px 5px 3px 0;
  background-color: var(--btn-color);
  border: 0;
  border-radius: 4px;
  transition: all .15s ease;
  outline: 0;
  &:hover:enabled {
    color: white;
    background-color: var(--btn-hover-color);
    cursor: pointer;
  }
  &:active:enabled {
    box-shadow: inset 0 0 4px rgba(black, 0.8);
  }
  img {
    width: 12px;
    padding: 7px;
  }
  button:disabled,
  button[disabled] {
    background-color: #cccccc;
    color: #666666;
  }
}

.container {
  max-width: 800px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
}

.github-corner:hover .octo-arm {
  animation: octocat-wave 560ms ease-in-out
}

iframe {
  display: inline-block;
  margin-left: 5px;
}

@keyframes octocat-wave {
  0%,
  100% {
    transform: rotate(0)
  }
  20%,
  60% {
    transform: rotate(-25deg)
  }
  40%,
  80% {
    transform: rotate(10deg)
  }
}

@media (max-width: 500px) {
  .github-corner:hover .octo-arm {
    animation: none
  }
  .github-corner .octo-arm {
    animation: octocat-wave 560ms ease-in-out
  }
}
